<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<div class="page_right equipment_state_right">
    <%@ include file="/WEB-INF/jsp/web/v3/device/_rightTop.jsp" %>

    <p style="line-height:80px;">${infoDevice.deviceName}&nbsp;&nbsp;${infoDevice.deviceShortCode}&nbsp;&nbsp;${infoDevice.dtName}</p>
    <div class="equipment_state_replenish">
        <span>远程补币</span>
        <div class="equipment_state_replenishdv">
            <span></span>
            <input type="number" value="0">
            <span></span>
            <a class="equipment_state_replenishbtn" href="javascript:;">确认</a>
        </div>
    </div>
    <div class="equipment_state_changeImg">
        <span>设备图片</span>
        <span class="equipment_state_changeImgCur"><img id="imgPath" src="${infoDevice.deviceImageUrl}" alt=""></span>
        <span class="equipment_state_changeImgbtn"><a href="javascript:;">更换图片</a><input type="file" name="imageFile" multiple="multiple" id="inputfile"></span>
    </div>
    <ul class="equipment_state_rightul">
        <li>
            <span>二维码</span>
            <a class="equipment_state_codebtn" href="javascript:;">查看</a>
            <div class="equipment_state_code">
                <div id="qrcode" style="margin-top:10px;float:right;"></div>
                <span style="display:block;clear:right;float:right;width:160px;text-align:center;text-indent:0;line-height:20px; ">多局二维码</span>
            </div>
        </li>

        <li style="clear:both;">
            <span>套餐设置</span>
            <a href="javascript:;" class="equipment_state_combobutton">编辑</a>
            <div>
                <ul class="equipment_state_combolist">
                    <form id="discounts">
                        <c:forEach items="${discountList}" var="data" varStatus="status">
                            <li>
                                <p>
                                    <i>${status.count}</i>
                                    <span>${data.money} 元<span>${data.coin}</span> 币</span>
                                    <a class="equipment_state_combobtn ${data.flag eq 0?"cur":""}" href="javascript:;"></a>
                                    <input type="hidden" name="discounts" value="${data.discountid}" ${data.flag eq 1?"":"disabled='disabled'"} />
                                </p>
                            </li>
                        </c:forEach>
                    </form>
                </ul>
                <div style="height:70px;"><a class="equipment_state_combobutton2" href="javascript:;">确认</a></div>
            </div>
        </li>

        <%--
        <li>
            <span>参数设置</span>
            <a href="javascript:;" class="equipment_state_setCombobutton">编辑</a>
            <ul class="equipment_state_setCombo">
                <li>
                    <span>强抓力</span>
                    <span>单位：电压</span>
                    <a class="equipment_state_setbtn" href="javascript:;">修改</a>
                    <span>${paramDto.param1}</span>
                    <div class="equipment_state_setdv">
                        <input type="number" value="${paramDto.param1}">
                        <a class="equipment_state_setdvbtn1" href="javascript:;">确认</a>
                        <a class="equipment_state_setdvbtn2" href="javascript:;">取消</a>
                    </div>
                </li>
                <li>
                    <span>弱抓力</span>
                    <span>单位：电压</span>
                    <a class="equipment_state_setbtn" href="javascript:;">修改</a>
                    <span>${paramDto.param2}</span>
                    <div class="equipment_state_setdv">
                        <input type="number" value="${paramDto.param2}">
                        <a class="equipment_state_setdvbtn1" href="javascript:;">确认</a>
                        <a class="equipment_state_setdvbtn2" href="javascript:;">取消</a>
                    </div>
                </li>
                <li>
                    <span>中奖抓力</span>
                    <span>单位：电压</span>
                    <a class="equipment_state_setbtn" href="javascript:;">修改</a>
                    <span>${paramDto.param3}</span>
                    <div class="equipment_state_setdv">
                        <input type="number" value="${paramDto.param3}">
                        <a class="equipment_state_setdvbtn1" href="javascript:;">确认</a>
                        <a class="equipment_state_setdvbtn2" href="javascript:;">取消</a>
                    </div>
                </li>
                <li>
                    <span>强抓力时间</span>
                    <span>单位：秒</span>
                    <a class="equipment_state_setbtn" href="javascript:;">修改</a>
                    <span>${paramDto.param4}</span>
                    <div class="equipment_state_setdv">
                        <input type="number" value="${paramDto.param4}">
                        <a class="equipment_state_setdvbtn1" href="javascript:;">确认</a>
                        <a class="equipment_state_setdvbtn2" href="javascript:;">取消</a>
                    </div>
                </li>
                <li>
                    <span>弱抓力时间</span>
                    <span>单位：秒</span>
                    <a class="equipment_state_setbtn" href="javascript:;">修改</a>
                    <span>${paramDto.param5}</span>
                    <div class="equipment_state_setdv">
                        <input type="number" value="${paramDto.param5}">
                        <a class="equipment_state_setdvbtn1" href="javascript:;">确认</a>
                        <a class="equipment_state_setdvbtn2" href="javascript:;">取消</a>
                    </div>
                </li>
                <li>
                    <span>概率</span>
                    <span>单位：百分号</span>
                    <a class="equipment_state_setbtn" href="javascript:;">修改</a>
                    <span>${paramDto.param6}</span>
                    <div class="equipment_state_setdv">
                        <input type="number" value="${paramDto.param6}">
                        <a class="equipment_state_setdvbtn1" href="javascript:;">确认</a>
                        <a class="equipment_state_setdvbtn2" href="javascript:;">取消</a>
                    </div>
                </li>
            </ul>
        </li>
        --%>

        <li class="equipment_state_eqName">
            <span>设备名称</span>
            <span>${infoDevice.deviceName}</span>
            <a class="equipment_state_eqNameSetbtn" href="javascript:;">修改</a>
            <div class="equipment_state_eqNamesetdv">
                <input type="text" value="${infoDevice.deviceName}">
                <a class="equipment_state_eqNamesetdvbtn1" href="javascript:;">确认</a>
                <a class="equipment_state_eqNamesetdvbtn2" href="javascript:;">取消</a>
            </div>
        </li>
        <li>
            <span>是否在线</span>
            <span style="color:${infoDevice.isOnline eq 1?"#0C0":"red"}";>${infoDevice.isOnline eq 1?"在线":"离线"}</span>
        </li>
        <li>
            <span>信号强弱</span>
            <span>
                <c:choose>
                    <c:when test="${infoDevice.dp<2}">
                        <img src="${basePath}resources/images/web/v2/equipment/wuxinhao.png" alt="">
                    </c:when>
                    <c:when test="${infoDevice.dp<=7}">
                        <img src="${basePath}resources/images/web/v2/equipment/xinhaoruo.png" alt="">
                    </c:when>
                    <c:when test="${infoDevice.dp<=14}">
                        <img src="${basePath}resources/images/web/v2/equipment/xinhaozhong2.png" alt="">
                    </c:when>
                    <c:when test="${infoDevice.dp<=23}">
                        <img src="${basePath}resources/images/web/v2/equipment/xinhaozhong.png" alt="">
                    </c:when>
                    <c:otherwise>
                        <img src="${basePath}resources/images/web/v2/equipment/xinhaoqiang.png" alt="">
                    </c:otherwise>
                </c:choose>
            </span>
        </li>
        <li>
            <span>禁用/启动</span>
            <a class="equipment_state_disable1 ${infoDevice.state eq 1?"":"cur"}" href="javascript:;"></a>
        </li>
        <li>
            <span>禁用/启动优惠码</span>
            <a class="equipment_state_disable2 ${infoDevice.isDisCode eq 1?"":"cur"}" href="javascript:;"></a>
        </li>
        <li class="equipment_state_placeName">
            <span>场地归属</span>
            <span>${infoDevice.address}</span>
            <a class="equipment_state_placeNamebtn" href="javascript:;">编辑</a>
            <!-- 场地归属 提示弹窗 -->
            <div class="equipment_state_placedv">
                <div class="equipment_state_placequery">
                    <input type="text" placeholder="请输入场地名称">
                    <a href="javascript:;">查询</a>
                </div>
                <ul class="equipment_state_place">
                    <c:forEach items="${placeList}" var="data">
                        <li><a href="javascript:;" name="${data.placeid}">${data.address}</a></li>
                    </c:forEach>
                </ul>
                <div style="clear:both;"></div>
            </div>
            <!-- 场地归属 提示弹窗 end -->
        </li>
        <li>
            <span>商户号</span>
            <span>${infoDevice.businessNo}</span>
        </li>
        <li>
            <span>设备简码</span>
            <span>${infoDevice.deviceShortCode}</span>
        </li>
        <li>
            <span>IMEI/MAC码</span>
            <span>${infoDevice.imme}</span>
        </li>
        <li>
            <span>设备解绑</span>
            <a href="javascript:;" class="equipment_state_unwrap">解绑</a>
            <!-- 解绑 提示弹窗 -->
            <div class="pointpage_dv3">
                <div class="pointpage3">
                    <p>是否解绑该设备？</p>
                    <p><a class="equipment_state_unwrapbtn1" href="javascript:;">确认</a>  <a class="equipment_state_unwrapbtn2" href="javascript:;">取消</a></p>
                </div>
            </div>
            <!-- 解绑 提示弹窗 end -->
            <!-- 权限修改成功 提示弹窗 -->
            <div class="pointpage_dv4">
                <div class="pointpage1">
                    <p class="pointpage_beginpsd">解绑成功！</p>
                </div>
            </div>
            <!-- 权限修改成功 提示弹窗 end -->
        </li>
    </ul>
</div>
<script src="${basePath}resources/js/wechat/js/jquery.qrcode.js"></script>
<script src="${basePath}resources/js/wechat/js/utf.js"></script>
<script type="application/javascript">
    var regName=/^\S{1,10}$/;
    var device = '${deviceId}';
    var payUrl ='${payUrl}';
    var equipment_state_numb=0;
    //设备修改名称
    $(".equipment_state_eqNamesetdvbtn1").on("click", function(){
        var equipment_state_seteqName=$(this).prev("input").val();
        if(regName.test(equipment_state_seteqName)){
            $.ajax({
                url:'${basePath}v2/device/'+device+'/updateDeviceName',
                type : 'POST',
                data : {'deviceName':equipment_state_seteqName},
                success: function (ret) {
                    if(ret.result) {
                        $(".equipment_state_eqNamesetdvbtn1").parent().prev().prev("span").text(equipment_state_seteqName);
                        $(".equipment_state_eqNamesetdvbtn1").parent("div").css({"transition":"all 0.1s","right":"-350px"});
                    }else{
                        alert(ret.info);
                    }
                }
            });
        }
    });
    //设备修改套餐
    $(".equipment_state_combobutton2").on("click", function(){
        $.ajax({
            url:'${basePath}v2/device/'+device+'/updateDeviceDiscount',
            type : 'POST',
            data : $("#discounts").serialize(),
            success: function (ret) {
                if(ret.result) {
                    $(".equipment_state_combobutton2").parent().parent().slideUp();
                    $(".equipment_state_combobutton2").parent().parent().prev().text("编辑");
                }else{
                    alert(ret.info);
                }
            }
        });
    });
    //设备修改参数
    $(".equipment_state_setCombo .equipment_state_setdvbtn1").each(function(index){
        $(this).on("click", function(){
            var equipment_state_setParameter=$(this).prev("input").val();
            if(equipment_state_setParameter>0){
                $.ajax({
                    url:'${basePath}v2/device/'+device+'/updateDeviceParam',
                    type : 'POST',
                    data : {"paramNum":index+1,"paramVal":equipment_state_setParameter},
                    success: function (ret) {
                        if(ret.result) {
                            $(".equipment_state_setCombo .equipment_state_setdvbtn1").parent().prev("span").text(equipment_state_setParameter);
                            $(".equipment_state_setCombo .equipment_state_setdvbtn1").parent("div").css({"transition":"all 0.1s","right":"-350px"});
                        }else{
                            alert(ret.info);
                        }
                    }
                });
            }
        });
    });
    //设备修改状态
    $(".equipment_state_disable1").on("click", function(){
        if($(this).hasClass("cur")){
            setState(1,1);
        }else{
            setState(2,1);
        }
    });
    //设备修改优惠券状态
    $(".equipment_state_disable2").on("click", function(){
        if($(this).hasClass("cur")){
            setState(1,2);
        }else{
            setState(2,2);
        }
    });
    //设备修改场地
    $(".equipment_state_place li").each(function(){
        $(this).click(function(){
            $(".equipment_state_placeName span:eq(1)").text($(this).text());
            var place = $(this).children("a").attr("name");
            $.ajax({
                url: "${basePath}v2/device/"+device+"/updateDevicePlace",
                type : 'POST',
                data : {'place':place},
                success: function (ret) {
                    if(ret.result){
                        $(".equipment_state_place li").parent().parent("div").slideUp();
                        $(".equipment_state_placeNamebtn").text("编辑");
                    }else{
                        alert(ret.info);
                    }
                }
            });
        })
    });
    //设备补币
    $(".equipment_state_replenishbtn").on("click", function(){
        equipment_state_numb=parseInt($(this).prev().prev("input").val());
        $(this).prev().prev("input").val(equipment_state_numb);
        if(equipment_state_numb>0){
            $(this).prev().prev("input").css("box-shadow","none");
            $.ajax({
                url: "${basePath}v2/device/"+device+"/updateDeviceCoin",
                type : 'POST',
                data : {'coin':equipment_state_numb},
                success: function (ret) {
                    if(!ret.result){
                        alert(ret.info);
                    }else{
                        alert("补币成功！","cur");
                    }
                }
            });
        }else{
            $(this).prev().prev("input").css("box-shadow","0 0 3px 1px #f00");
        }
    });
    //设备解绑
    //解绑设备
    $(".equipment_state_unwrap").on("click", function(){
        $(".pointpage_dv3").stop().show();
    });
    //解绑设备  确认
    $(".equipment_state_unwrapbtn1").on("click", function(){
        $(".pointpage_dv3").stop().hide();
        $.ajax({
            url: "${basePath}v2/device/"+device+"/updateDeviceBindState",
            type : 'POST',
            data : {'deviceId':device},
            success: function (ret) {
                if(ret.result){
                    $(".pointpage_dv4").stop().show();
                    $(".pointpage_dv4").on("click", function(){
                        window.location.href = "${basePath}v2/device/showView";
                    });
                }else{
                    alert(ret.info);
                }
            }
        });
    });
    //解绑设备  取消
    $(".equipment_state_unwrapbtn2").on("click", function(){
        $(".pointpage_dv3").stop().hide();
    });
    //更换图片
    $("#inputfile").change(function(){
        //创建FormData对象
        var data = new FormData();
        //为FormData对象添加数据
        $.each($('#inputfile')[0].files, function(i, file) {
            data.append('imageFile', file);
        });
        $.ajax({
            url:'${basePath}v2/device/'+device+'/updateDeviceImg',
            type:'POST',
            data:data,
            cache: false,
            contentType: false,
            processData: false,
            success:function(ret){
                if(ret.result){
                    $("#imgPath").attr("src",ret.data);
                }else{
                    alert(ret.info);
                }
            }
        });
    });

    /**
     * 设置状态
     * @param n 状态值
     * @param m 调用方法
     */
    function setState(n,m){
        var state = n;
        var type = m;
        var url="";
        if(type==1){
            url = "${basePath}v2/device/"+device+"/updateDeviceState";
        }else{
            url = "${basePath}v2/device/"+device+"/updateDeviceCouponState";
        }
        $.ajax({
            url:url,
            type : 'POST',
            data : {'state':state},
            success: function (ret) {
                if(ret.result) {
                    if(n==1){
                        $(".equipment_state_disable"+type).removeClass("cur");
                    }else{
                        $(".equipment_state_disable"+type).addClass("cur");
                    }
                }else{
                    alert(ret.info);
                }
            }
        });
    };

    getQRCode('qrcode',payUrl,'','160','160');

    //生成二维码
    function getQRCode(id,text,src,width,height){
        return $("#"+id).qrcode({
            render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
            text : text,    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
            width : width,               //二维码的宽度
            height : height,              //二维码的高度
            background : "#ffffff",       //二维码的后景色
            foreground : "#000000",        //二维码的前景色
            src:src             //二维码中间的图片
        });
    }

</script>